<template>
	<view style="display: flex;justify-content: center;background-color: #FFFFFF;padding-bottom: 100rpx;">
		<uni-popup ref="popup" type="center" mask-click="false">
			<view class="popup">
				<view class="form">
					<view><text class="red">*</text>配件名：<input type="text" placeholder="请输入配件名"
							v-model="from.goods_name" :disabled="disabled"></view>
					<view><text class="red">*</text>工时费：<input type="number" placeholder="请输入配件工时费" v-model="from.price"
							:disabled="disabled"></view>
					<view><text class="red">*</text>数量：<input type="number" placeholder="请输入数量" v-model="from.num"
							:disabled="disabled"></view>
				</view>
				<view class="btn-group">
					<view class="close" @click="close">取消</view>
					<view class="confirm" @click="confirm">确定</view>
				</view>
			</view>
		</uni-popup>
		<view class="Infoboxform" v-if="isfinsh">
			<view class="textblock font32">报修单号：{{data.info.order_id}}
				<text v-if="data.info.status == '4'">待确认</text>
				<text v-if="data.info.status == '0'">已报修</text>
				<text v-if="data.info.status == '1'">待受理</text>
				<text v-if="data.info.status == '2'">待派工</text>
				<text v-if="data.info.status == '3'">进行中</text>
			</view>
			<view class="textblock ">联系人 ：<text class="c66">{{data.info.user_name}}</text></view>
			<view class="textblock ">联系电话：<text class="c66">{{data.info.user_mobile}}</text><text
					class="iconfont cmain ml30" @click="callphone(data.info.user_mobile)">&#xe8b8;</text></view>
			<view class="textblock ">报修地址：<text class="c66">{{data.info.address}}</text> <text style="color: #007AFF;"
					@click="moveTo" class="ml30">导航</text></view>
			<view class="textblock " style="display: inline-block;">维修时间：
				<view class="c66" style="display: inline-block;">{{data.info.est_start_time}}
					<view style="display: table-cell;" class="c66">{{data.info.est_end_time}}</view>
				</view>

			</view>
			<view class="textblock flex" style="padding: 15rpx 0;">
				<text class="cell-left">
					上门师傅：
				</text>
				<view class="user" v-for="(item,index) in data.worker">
					<image :src="item.avatar" class="userimg"></image>
					<view class="userinfo">
						<text class="name">
							{{item.nickname}}
							<text class="startmun">{{item.start}}.0</text>
							<text class="starticon" :class="'starticon'+item.start"></text>
						</text>
						<text class="priceone">工时费：{{item.unit_price}}元/小时</text>
						<text class="pricetwo">上门费：已付{{item.first_pay_price}}元</text>
					</view>
				</view>

			</view>
			<view class="textblock ">问题描述：<text class="c66">{{data.info.mark}}</text></view>
			<view class="textblock " v-if="data.info.images.length">报修图片：
				<view style="display: flex;justify-content: flex-start;align-items: flex-start;">
					<image @click="lookimg(item,1)" :src="item" style="width: 120rpx;height: 120rpx;"
						v-for="(item,index) in data.info.images" :key="index" class="ml20"></image>
				</view>
			</view>
			<view class="textblock " v-if="data.info.video">报修视频：
				<video :src="data.info.video" controls></video>
			</view>

			<view class="textblock ">确认图片：
				<htz-image-upload :max="3" v-if="data.info.status == '4'" :chooseNum="3" v-model="uploadimg"
					@uploadSuccess="uploadimgSuccess" style="width: 70%;" :compress="false"
					action="https://bst.schainbaas.com/api/upload/image" :sourceType="sourceType">
				</htz-image-upload>
				<view style="display: flex;justify-content: flex-start;align-items: flex-start;" v-else>
					<image @click="lookimg(item,2)" :src="item" style="width: 120rpx;height: 120rpx;"
						v-for="(item,index) in data.info.confirm_images" :key="index" class="ml20"></image>
				</view>
			</view>
			<view class="textblock ">维修耗时：<text class="c66">{{(data.info.work_time / 1000/60).toFixed(2)}}分钟</text>
			</view>
			<view class="textblock ">维修费用：<text class="c66">{{data.info.work_price}}元</text></view>
			<view class="textblock " v-if="data.info.status != '4'">享受折扣：<text
					class="c66">{{data.info.discount}}折</text></view>
			<view class="textblock " v-else>
				<tetx>*</tetx>享受折扣:
				<picker @change="bindPickerChange" :value="index"
					style="display: inline-block;width: 75%;text-align: end;" :range="preferential"
					:disabled="data.info.status != '4'" range-key="discount">
					<view class="uni-input">{{sold}}</view>
				</picker>

			</view>
			<view class="textblock " style="padding:0 0 30rpx 0;">
				<view class="cell-left">
					<tetx>*</tetx>零配件：<text class="iconfont cmain cell-left" style="margin-left: 90%;" @click="choosepj"
						v-if="data.info.status == '4'">&#xe61c;</text>
				</view>
				<view class="part" v-if="data.info.status != '4'">
					<view class="item-box flex" v-for="(item,index) in data.parts" :key="index">
						<image :src="item.images" class="userimg"></image>
						<view class="userinfo">
							<text class="sname">{{item.goods_name}} <text></text> </text>
							<text class="priceone">工时费<text class="s-money">￥ {{item.price}}</text></text>
							<text class="count">x{{item.num}}</text>
						</view>
					</view>
					<text class="price2">小计：<text class="money">￥{{dealpj(data.parts)|| 0}}</text> </text>
				</view>
				<view class="part" v-if="data.info.status == '4'">
					<view class="item-box flex" v-for="(item,index) in data.parts" :key="index">
						<image :src="item.image" class="userimg"></image>
						<view class="userinfo">
							<text class="sname">{{item.store_name}} <text></text> </text>
							<text class="priceone">工时费<text class="s-money">￥ {{item.price}}</text></text>
							<text class="count">x{{item.num}}</text>
						</view>
					</view>
					<text class="price2">小计：<text class="money">￥{{dealpj(data.parts)|| 0}}</text> </text>
				</view>
			</view>
			<view class="textblock flex" style="padding:0 0 30rpx 0;">
				<view class="cell-left">
					<tetx>*</tetx>其他配件：<text class="iconfont cmain cell-left" style="margin-left: 90%;"
						@click="chooseother" v-if="data.info.status == '4'">&#xe61c;</text>
				</view>
				<view class="o-part">
					<view class="item-box" v-for="(item,index) in data.other_parts" :key="index">
						<view class="userinfo">
							<text class="name">{{item.goods_name}} <text></text> </text>
							<text class="priceone">单价:<text class="s-money">￥ {{item.price}}</text></text>
							<text class="count">x{{item.num}}</text>
							<text class="iconfont delpart" @click="delpart(index)"
								v-if="data.info.status == '4'">&#xe692;</text>
						</view>
					</view>
					<text class="price2">小计：<text class="money">￥{{dealpj(data.other_parts,1) || 0}}</text> </text>

				</view>
			</view>
			<view class="textblock">
				<tetx>*</tetx>其他费用：
				<input style="text-align: end;width: 70%;margin: auto;" type="text" @blur="finallmoney" class="money"
					placeholder="请输入其他费用" v-model="data.info.other_fees" v-if="data.info.status == '4'">
				<text v-else class="c66 money" style="float: right;"><text>￥{{data.info.other_fees|| 0}}</text>
				</text>
			</view>
			<view class="textblock">
				<tetx>*</tetx>描述：
				<input style="text-align: end;width: 70%;margin: auto;" type="text" placeholder="请输入其他费用描述"
					v-model="data.info.other_explain" v-if="data.info.status == '4'">
				<text v-else class="c66" style="float: right;"><text>{{data.info.other_explain || '无'}}</text>
				</text>
			</view>
			<view class="textblock">
				<tetx>*</tetx>上门费用：
				<text class="price2" style="float: right;"><text
						class="money">￥{{data.info.expect_balance_price || 0.00}}</text></text>
			</view>
			<view class="textblock">
				<tetx>*</tetx>工作费用：
				<text class="price2" style="float: right;width: 20%;"><text
						class="money">￥{{data.info.work_to_price || 0.00}}</text> </text>
			</view>
			<view class="finall">
				总费用: <text class="money ml20"> ￥ {{data.info.order_balance }} 元</text>
			</view>
			<view class="mt30" v-if="data.info.status == '4'">
				<button class=" bmain cff" style="border-radius: 50rpx;" @click="confrimOrder(0)">确认订单</button>
			</view>
			<view class="mt30" v-if="data.info.status == '4'">
				<button class="cff" style="border-radius: 50rpx; background-color: red;" @click="confrimOrder(1)">已线下支付</button>
			</view>
			<view class="footer">

			</view>
		</view>

	</view>
</template>

<script>
	import {
		orderDetial,
		confirm
	} from '../../api/api.js'
	import regeneratorRuntime from 'regenerator-runtime'
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	export default {
		components: {

			htzImageUpload
		},
		data() {
			return {
				id: "",
				uploadimg: [],
				sourceType: ['album', 'camera'],
				from: {
					goods_name: "",
					price: "",
					num: "",
					confirm_images: "",
				},

				imgarr2: [],
				discount_id: "",
				data: {},
				sold: "点击选择折扣(仅维修费用生效)",
				index: 0,
				flag1: false,
				preferential: [],
				isfinsh: false,
				list: [],
				uploadUrl: ''
			}
		},
		created() {
			this.uploadUrl = uni.getStorageSync('uploadUrl')
		},
		onLoad(opt) {
			this.list = opt.data
			let data = JSON.parse(opt.data)
			this.id = data.id
			this.datainit()
		},


		methods: {
			// 上传图片
			uploadimgSuccess(e) {
				let that = this
				let path = JSON.parse(e.data).data.url
				if (!that.uploadimg) {
					that.uploadimg = []
				}
				that.uploadimg.push(path)
				console.log('图片', that.uploadimg, path)

			},
			// 删除其他配件
			delpart(e) {
				this.data.other_parts.splice(e, 1)
			},
			// 选择配件
			choosepj() {
				uni.navigateTo({
					url: `/pages/sf/shop/index?data=${this.list}`
				})
			},
			//改变总价
			finallmoney() {
				let sold = ''
				if (this.sold.indexOf('折') == 1 || this.sold.indexOf('折') == 3) {
					sold = this.sold.replace('折', '')
				}
				console.log('折扣', this.sold, sold)
				if (parseFloat(sold) > -9) {

				} else {
					sold = 10
				}
				this.data.info.order_balance = (
						parseFloat(this.dealpj(this.data.parts)) +
						parseFloat(this.dealpj(this.data.other_parts)) +
						parseFloat(this.data.info.other_fees) + parseFloat(this.data.info.expect_balance_price) +
						(parseFloat(this.data.info.work_to_price) * (parseFloat(sold) / 10)))
					.toFixed(2)
				console.log('计算总价', parseFloat(this.dealpj(this.data.parts)), parseFloat(this.dealpj(this.data
					.other_parts)), parseFloat(this.data.info.other_fees), sold, this.data.info.order_balance)
			},
			// 查看图片
			lookimg(e, type) {
				let path = ''
				if (type == 1) {
					path = this.data.info.images
				}
				if (type == 2) {
					path = this.data.info.confirm_images
				}
				wx.previewImage({
					current: e, // 当前显示图片的http链接
					urls: path // 需要预览的图片http链接列表
				})
			},
			close() {
				this.$refs.popup.close()
				this.from = {
					goods_name: "",
					price: "",
					num: ""
				}
			},
			confirm() {
				if (!this.from.goods_name || !this.from.price || !this.from.num) {
					uni.showToast({
						title: "请完善信息再试!",
						icon: "none"
					})
					return
				}
				uni.showToast({
					title: "添加成功!",
					icon: "none"
				})
				this.data.other_parts.push(this.from)
				this.from = {
						goods_name: "",
						price: "",
						num: "",
					},
					this.finallmoney()
				this.$refs.popup.close()
			},

			// 选择其他配件
			chooseother() {
				this.$refs.popup.open()

			},


			// 调用导航
			moveTo() {
				// 使用微信内置地图查看位置
				wx.openLocation({
					'latitude': Number(this.data.info.lat),
					'longitude': Number(this.data.info.lng),
					scale: 28,
					name: this.data.info.address, //打开后显示的地址名称
				})
			},
			// 拨打电话
			callphone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			bindPickerChange(e) {
				console.log(e.detail.value)
				let value = e.detail.value
				this.sold = this.preferential[value].discount + '折'
				this.discount_id = this.preferential[value].id
				this.finallmoney()
			},
			/**
			 * 确认订单
			 * is_offline_pay : 是否已线下支付
			 */
			confrimOrder(is_offline_pay) {

				let partlist = []
				this.data.parts.forEach(item => {
					let partson = {}
					partson.product_id = item.id
					partson.num = item.num
					partlist.push(partson)
				})
				console.log(partlist, this.data.parts, 'partlist')
				let otherlist = []
				let otherson = {}
				this.data.other_parts.forEach(item => {
					otherson.goods_name = item.goods_name
					otherson.price = item.price
					otherson.num = item.num
					otherlist.push(otherson)
				})

				let data = {
					id: this.id,
					other_fees: this.data.info.other_fees,
					parts: JSON.stringify(partlist),
					other_parts: JSON.stringify(otherlist),
					discount_id: this.discount_id,
					other_explain: this.data.info.other_explain,
					is_offline_pay: is_offline_pay

				}
				
				if (this.uploadimg.length) {
					data.confirm_images = this.uploadimg.toString()
				}
				console.log('传递的参', data, this.data.parts)
				// return
				confirm(data).then(res => {
					uni.setStorageSync('pjshop', [])
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.status == 200) {
						uni.navigateTo({
							url: '/pages/index/index?tab=${1}'
						})
					}
				})
			},
			// 计算配件总额
			dealpj(obj, e) {

				// console.log('处理的谁', obj, e)
				let money = 0
				obj.forEach(item => {
					money += item.price * item.num
				})
				return money
			},
			// 初始化
			datainit() {
				let data = {
					id: this.id
				}
				orderDetial(data).then(res => {
					this.data = res.data
					if (this.data.info.status != 4) {
						this.sold = this.data.info.discount + '折'
						console.log('改变折扣')
					}
					this.isfinsh = true
					this.preferential = res.data.discount_list
					if (this.data.info.status != 4) return
					let pjshop = uni.getStorageSync('pjshop')
					if (pjshop.length == 0) return;
					this.data.parts = pjshop
					this.flag1 = true
					console.log('其他配件', pjshop, this.data.parts)
					this.finallmoney()
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.Infoboxform {
		display: block;
		background-color: #FFFFFF;
		padding: 20rpx 40rpx;
		padding-bottom: 60rpx;
		width: 80%;
		// height: 100%;
		margin-top: 50rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.2);
		// margin-bottom: 90rpx;

		.finall {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 66rpx;
			color: #333333;
			width: 100%;
			text-align: end;
		}

		.textblock {
			position: relative;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 66rpx;
			color: #333333;
			border-bottom: 2rpx #F7F5F6 solid;

			.part {
				// display: flex;
				width: 70%;
				margin-left: 31%;
				padding: 0;
				margin-top: 30rpx;

				.price2 {
					font-size: 24rpx;
					// font-weight: 400;
					line-height: 30rpx;
					color: #666666;
					text-align: end;
					width: 100%;
					display: block;
					margin-top: 20rpx;
					margin-right: 30rpx;
				}

				.sname {
					position: absolute;
					top: -10rpx;
					left: 110rpx;
				}

				.item-box {
					height: 80rpx;
					position: relative;
					width: 100%;
					margin-top: 30rpx;

					.count {
						position: absolute;
						bottom: -10rpx;
						right: 10rpx;
						color: #999999;
					}

					.userimg {
						width: 80rpx;
						position: absolute;
						left: 0;
						// top: 10rpx;
						height: 80rpx;
						display: flex;
					}

					.name {
						font-size: 28rpx;
						position: absolute;
						left: 90rpx;
						font-weight: 400;
						line-height: 34rpx;
						color: #666666;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 0 0 10rpx 0;
					}

					.priceone {
						position: absolute;
						left: 90rpx;
						top: 30rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 22rpx;
						color: #666666;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 24rpx 0;
					}



				}

			}

			.o-part {
				// display: flex;
				width: 75%;
				margin-left: 25%;
				padding: 0;

				.price2 {
					font-size: 24rpx;
					// font-weight: 400;
					line-height: 30rpx;
					color: #666666;
					text-align: end;
					width: 100%;
					display: block;
					margin-top: 20rpx;
					margin-right: 30rpx;
				}

				.item-box {
					height: 80rpx;
					position: relative;
					width: 100%;
					margin-top: 30rpx;

					.count {
						position: absolute;
						bottom: -10rpx;
						right: 10rpx;
						color: #999999;
					}

					.delpart {
						font-size: 28rpx;
						position: absolute;
						right: 10rpx;
						font-weight: 400;
						line-height: 34rpx;
						color: #666666;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 0 0 10rpx 0;
					}

					.name {
						font-size: 28rpx;
						position: absolute;
						left: 10rpx;
						font-weight: 400;
						line-height: 34rpx;
						color: #666666;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 0 0 10rpx 0;
					}

					.priceone {
						position: absolute;
						left: 10rpx;
						top: 30rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 22rpx;
						color: #666666;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 24rpx 0;
					}



				}

			}

			.user {
				display: flex;
				margin-left: 80rpx;

				.userimg {
					width: 140rpx;
					height: 140rpx;
					display: flex;
				}

				.name {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 34rpx;
					color: #666666;
					display: block;
					padding: 0 0 0 24rpx;
					margin: 0 0 10rpx 0;

					.startmun {
						font-size: 24rpx;
						color: #FEC860;
						padding: 0 0 0 24rpx;
					}

					.starticon {
						width: 17rpx;
						height: 17rpx;
						display: inline-block;
						color: rgba(255, 255, 255, 0);
						background: url(../../static/zyyxsf.png) repeat-x center;
						background-size: contain;
						vertical-align: middle;
						margin: -2px 0 0 6px;

					}

					.starticon2 {
						width: 34rpx;
					}

					.starticon3 {
						width: 51rpx;
					}

					.starticon4 {
						width: 68rpx;
					}

					.starticon5 {
						width: 85rpx;
					}

				}

				.priceone {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 22rpx;
					color: #5490FE;
					display: block;
					padding: 0 0 0 24rpx;
					margin: 24rpx 0;
				}

				.pricetwo {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 22rpx;
					color: #FEC860;
					display: block;
					padding: 0 0 0 24rpx;
				}
			}
		}

		.font32 {
			color: #5490FE;
			font-size: 32rpx;

			text {
				font-size: 24rpx;
				font-weight: 400;
				line-height: 26px;
				color: #FEC860;
				float: right;
			}
		}
	}

	.cell-left {
		width: 25%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.footer {
		width: 100%;
		height: 100rpx;
	}

	.popup {
		width: 600rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		position: relative;

		.form {
			width: 90%;
			position: absolute;
			top: 30rpx;
			left: 5%;

			input {
				display: inline-block;
				width: 65%;
				vertical-align: middle;
			}

			view {
				line-height: 80rpx;
				border-bottom: 2rpx solid #f0efef;
				color: #333;
			}

			>view:last-of-type {
				border: none;
			}
		}

		.btn-group {
			width: 100%;
			display: flex;
			height: 60rpx;
			justify-content: center;
			align-items: center;
			line-height: 60rpx;
			position: absolute;
			bottom: 0rpx;

			.confirm {
				width: 50%;
				color: #FFFFFF;
				text-align: center;
				background-color: #007AFF;
			}

			.close {
				width: 50%;
				color: #FFFFFF;
				text-align: center;
				background-color: #09BB07;
			}
		}

	}
</style>
